<template>
  <div class="homePage">
    <div class="block">
      <el-carousel height="580px" :interval="5000" arrow="always" :autoplay="true">
        <el-carousel-item v-for="(item,index) in backgroundImg" :key="index">
          <!-- tab栏目 -->
          <div class="tabs">
            <div class="tab">
              <div
                class="tab_item"
                v-for="(item,index) in options"
                :key="index"
                :class="{active:currentOption===index}"
                @click="changeTab(index)"
              >
                <span>{{ item.name }}</span>
              </div>
            </div>
            <!-- 输入框 -->
            <input
              type="text"
              :placeholder="options[currentOption].placeholder"
              v-model="searchValue"
              @keypress="handleSearch"
            />

            <div class="iconfont icon-sousuo" @click="handleSearch"></div>
          </div>

          <!-- 轮播图 -->
          <div
            :style="`background:url(${item.url}) center center no-repeat;background-size: contain contain`"
            class="backgroundImg"
          ></div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import bgi1 from "@/static/bgi1.jpg";
import bgi2 from "@/static/bgi2.jpg";
import bgi3 from "@/static/bgi3.jpg";
import bgi4 from "@/static/bgi4.jpg";
import bgi5 from "@/static/bgi5.jpg";

export default {
  data() {
    return {
      backgroundImg: [
        {
          url: bgi1
        },
        {
          url: bgi2
        },
        {
          url: bgi3
        },
        {
          url: bgi4
        },
        {
          url: bgi5
        }
      ],
      options: [
        {
          name: "攻略",
          placeholder: "请您输入城市搜索相关攻略",
          pageUrl:'/post'
        },
        {
          name: "酒店",
          placeholder: "请您输入城市搜索相关酒店",
          pageUrl:'/hotel'
        },
        {
          name: "机票",
          placeholder: "请您输入出发地",
          pageUrl:'/air'
        }
      ],
      // data中设置初始值，index为0时高亮
      currentOption: 0,
      // 存储输入框的值
      searchValue: ""
    };
  },

  methods: {
    changeTab(index) {
      if (index == 2) {
        this.$router.push("/air");
      } else {
        // 切换tab栏时将当前index同步给激活状态，实现高亮
        this.currentOption = index;
      }
    },

    handleSearch() {
      this.$router.push(this.options[this.currentOption].pageUrl+'?city='+this.searchValue);
    }
  }
};
</script>

<style lang="less" scoped>
.block {
  min-width: 1000px;
  margin: 0 auto;
  position: relative;

  // /deep/ .el-carousel__container {
  //   height: 580px;
  // }

  .backgroundImg {
    width: 100%;
    height: 100%;
  }

  .tabs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .tab {
      display: flex;

      &_item {
        width: 86px;
        height: 38px;
        line-height: 38px;
        background-color: rgba(235, 229, 228, 0.8);
        margin-right: 8px;
        text-align: center;
        transform: scale(1.1, 1.3) perspective(0.7em) rotateX(2.2deg);
        transform-origin: bottom left;
        font-style: italic;
        margin-right: 10px;
        cursor: pointer;
      }

      .active {
        background: #fff;
      }
    }

    input {
      height: 50px;
      width: 550px;
      border: none;
      outline: none;
      box-shadow: 5px 5px 5px #888;
      border-radius: 0 4px 4px 4px;
      text-indent: 20px;
    }

    .icon-sousuo {
      position: absolute;
      right: 0;
      top: 0;
      right: 16px;
      top: 50px;
      font-size: 24px;
      cursor: pointer;
    }
  }
}
</style>